<!-- src/components/Appointment.vue -->
<template>
  <div class="appointments">
    <el-button type="primary" @click="openDialog()">新增预约记录</el-button>
    <el-table :data="data" style="margin-top: 20px" border>
      <el-table-column prop="id" label="ID" width="80" />
      <el-table-column prop="patientName" label="患者姓名" />
      <el-table-column prop="appointmentTime" label="预约时间" />
      <el-table-column label="操作" width="200">
        <template #default="{ row }">
          <el-button type="primary" size="small" @click="edit(row)"
            >编辑</el-button
          >
          <el-button type="danger" size="small" @click="remove(row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="预约记录" v-model="dialogVisible">
      <el-form :model="form">
        <el-form-item label="患者姓名" :label-width="formLabelWidth">
          <el-input v-model="form.patientName" />
        </el-form-item>
        <el-form-item label="预约时间" prop="appointmentTime">
          <el-date-picker
            v-model="form.appointmentTime"
            type="datetime"
            placeholder="选择日期时间"
            format="YYYY-MM-DD HH:mm:ss"
            value-format="YYYY-MM-DD HH:mm:ss"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="save">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>
  
  <script lang="ts" setup>
import { ref, reactive } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";

interface Appointment {
  id: number;
  patientName: string;
  appointmentTime: string | Date;
}

const data = ref<Appointment[]>([
  { id: 1, patientName: "小明", appointmentTime: new Date().toISOString() },
  { id: 2, patientName: "小红", appointmentTime: new Date().toISOString() },
]);

const dialogVisible = ref(false);
const formLabelWidth = "120px";
const form = reactive<Appointment>({
  id: 0,
  patientName: "",
  appointmentTime: "",
});

const openDialog = () => {
  form.id = 0;
  form.patientName = "";
  form.appointmentTime = "";
  dialogVisible.value = true;
};

const save = () => {
  if (!form.patientName || !form.appointmentTime) {
    ElMessage.warning("请输入完整信息");
    return;
  }
  if (form.id === 0) {
    const newId = data.value.length
      ? Math.max(...data.value.map((i) => i.id)) + 1
      : 1;
    data.value.push({
      id: newId,
      patientName: form.patientName,
      appointmentTime: form.appointmentTime,
    });
    ElMessage.success("新增成功");
  } else {
    const index = data.value.findIndex((item) => item.id === form.id);
    if (index > -1) {
      data.value[index] = { ...form };
      ElMessage.success("编辑成功");
    }
  }
  dialogVisible.value = false;
};

const edit = (row: Appointment) => {
  form.id = row.id;
  form.patientName = row.patientName;
  form.appointmentTime = row.appointmentTime;
  dialogVisible.value = true;
};

const remove = (row: Appointment) => {
  ElMessageBox.confirm("确定删除该记录？", "提示", { type: "warning" }).then(
    () => {
      data.value = data.value.filter((i) => i.id !== row.id);
      ElMessage.success("删除成功");
    }
  );
};
</script>
  
  <style scoped lang="scss">
.appointments {
  padding: 20px;
}
</style>
  